<template>
<div class='xtx-carousel'>
<ul class="carousel-body">
<li class="carousel-item fade">
<RouterLink to="/">
<img :src="srcImg" alt="">   

</RouterLink>
</li>
</ul>
 <!-- 轮播图的左侧的箭头 -->
<a href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
 <!-- 轮播图的右侧箭头 -->
<a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
 <!-- 轮播图的5个图中的小点点 -->
<div class="carousel-indicator">
 <!-- v-for中可以写i 循环几次 可以学习一下 -->
<span v-for="i in 5" :key="i"></span>
</div>
</div>
</template>
 <script>
import { ref, watch, onMounted } from 'vue'
export default {
  name: 'XtxCarousel',
  props: {
    sliders: {
      type: Array,
      default: () => []
    },
    duration: {
      type: Number,
      default: 2
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    srcImg:{
    type:String,
    default:'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg'
    }
  },
  setup(props) {
    console.log(props.sliders)
    // 自动轮播的效果
    const index = ref(0)  
    // index初识值为0模板可以显示第一张图片
    let timer = null
    const autoplayFn = () => {
      clearInterval(timer)
      // 2.自动轮播
      timer = setInterval(() => {
        index.value++
        if (index.value >= props.sliders.length) {
          index.value = 0
        }
      }, props.duration * 1000) // 设置为秒
    }
    watch(
      () => props.sliders,
      () => {
        if (props.autoplay && props.sliders.length > 0) {
          autoplayFn()
        }
      },
      {
        immediate: true
      }
    )
 
    // 1.左右箭头点击显示上一页或者下一页
    const toggle = step => {
      index.value += step
      // 点击右键
      if (index.value >= props.sliders.length) {
        index.value = 0
        return
      }
      // 点击左键
      if (index.value < 0) {
        index.value = props.sliders.length - 1
      }
    }
    // 3.进入就轮播图就停止,离开就继续轮播
    const start = () => {
      if (props.sliders.length > 0 && props.autoplay) {
        autoplayFn()
      }
    }
    const stop = () => {
      clearInterval(timer)
    }
    // 最后销毁定时器,不然已经看不到轮播图了,一致都还在浪费资源
    onMounted(() => {
      clearInterval(timer)
    })
    return { index, toggle, start, stop }
  }
}
</script>


<style scoped lang="less">
.xtx-carousel{
width: 100%;
height: 500px;
min-width: 300px;
min-height: 150px;
position: relative;
.carousel{
&-body {
width: 100%;
height: 100%;
}
&-item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 0.5s linear;
&.fade {
opacity: 1;
z-index: 1;
}
img {
width: 100%;
height: 100%;
}
}
&-indicator {
position: absolute;
left: 0;
bottom: 20px;
z-index: 2;
width: 100%;
text-align: center;
span {
display: inline-block;
width: 12px;
height: 12px;
background: rgba(0,0,0,0.2);
border-radius: 50%;
cursor: pointer;
~ span {
margin-left: 12px;
}
&.active {
background: #fff;
}
}
}
&-btn {
width: 44px;
height: 44px;
background: rgba(0,0,0,.2);
color: #fff;
border-radius: 50%;
position: absolute;
top: 228px;
z-index: 2;
text-align: center;
line-height: 44px;
opacity: 0;
transition: all 0.5s;
&.prev{
left: 20px;
}
&.next{
right: 20px;
}
}
}
&:hover {
.carousel-btn {
opacity: 1;
}
}
}
</style>